<template>
  <div>
    <van-list
      :immediate-check="false"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getBoxList"
      v-if='list.length'
    >
      <div class="list">
        <bind-box-item
          v-for="(item,index) in list"
          :key="index"
          :bindBoxInfo="item"
          @openBoxSuccess="openBoxSuccess(index)"
          @activateCashCoupun="activateCashCoupun"
          @confirmDeliveryGoods="confirmDeliveryGoods"
          @convertCashSuccess='convertCashSuccess'
          @exchangeUserBoxPrizeSuccess='exchangeUserBoxPrizeSuccess'
        ></bind-box-item>
      </div>
    </van-list>
    <empty-data
      description="空空如也~"
      :emptyImg="emptyImg"
      v-if='!list.length'
    ></empty-data>
  </div>
</template>

<script>
import BindBoxItem from "./BindBoxItem";
import EmptyData from "./EmptyData";
import { List } from "vant";
import apBox from "@/common/api/apBox";
import apiCash from "@/common/api/apiCash";
import { mapGetters } from "vuex";
export default {
  name: "BindBoxTabItem",
  components: {
    [List.name]: List,
    [BindBoxItem.name]: BindBoxItem,
    [EmptyData.name]: EmptyData,
  },
  props: {
    activeName: {
      type: String,
      default: "",
    },
    isRefreshReceived: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    activeName: function (val) {
      console.log(val,this.status)
      this.status = val;
      this.initData()
    },
    isRefreshReceived: function (val) {
      this.refreshReceived = val;
    },
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  data() {
    return {
      emptyImg:
        "http://alivod.sdxgxx.cn/image/default/805FA0987DC9499D957BB7FF046D958C-6-2.png",
      list: [],
      loading: false,
      finished: false,
      status: "",
      count: 10,
      lastId: 0,
      refreshReceived: false, //是否刷新收货
    };
  },
  created() {
    this.status = this.activeName;
    if (this.refreshReceived) {
      return;
    }
    this.getBoxList();
  },
  mounted() {},
  methods: {
    initData() {
      this.lastId = 0;
      this.list = [];
      this.getBoxList();
    },
    exchangeUserBoxPrizeSuccess(){
      this.initData();
    },
    // 这换现金券成功
    convertCashSuccess(){
      this.initData();
    },
    //  立即激活
    activateCashCoupun(info) {
      this.$toast.loading();
      apiCash
        .cashCoupunActivate({
          userId: this.userInfo.userId,
          couponId: info.cashCouponId,
        })
        .then((data) => {
          this.$toast.clear();
          this.$toast.success("激活成功");
          setTimeout(() => {
            this.openBoxSuccess();
          }, 2000);
        });
    },
    openBoxSuccess(){
      this.initData();
    },
    // 确认收货
    confirmDeliveryGoods(info) {
      this.$toast.loading();
      apBox
        .receiveGoods({
          id: info.id,
        })
        .then((data) => {
          this.$toast.clear();
          this.confirmDeliveryGoodsSuccess()
          this.$emit("confirmDeliveryGoodsSuccess");
        });
    },
    confirmDeliveryGoodsSuccess(){
      this.initData();
    },
    getBoxList() {
      this.$toast.loading();
      apBox
        .getMyBoxInfo({
          userId: this.userInfo.userId,
          status: this.status,
          lastId: this.lastId ? this.lastId : 0,
          count: this.count,
        })
        .then((data) => {
          this.$toast.clear();
           if (this.refreshReceived) {
             this.$emit("refreshSuccess")
          }
          if (!data.data.length) {
            this.finished = true;
            return;
          }
          this.list = [...this.list, ...data.data];
          this.lastId = this.list[this.list.length - 1].id;
          this.loading = false;
          if (data.data.length < this.count) {
            this.finished = true;
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../common/css/common.less";

.my-bind-box {
  padding-left: 0;
  padding-right: 0;
  padding-top: 90px;

  ::v-deep .van-tab--active {
    font-size: 34px;
    font-weight: 500;
  }
  .list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
    width: 100%;
    padding: 24px 24px;
    box-sizing: border-box;
    .bind-box-item {
      margin-bottom: 24px;
    }
  }
}
</style>
